import React, { useEffect } from 'react';
import HgBreadCrumb from '../../../components/HgBreadCrumb';
import "./index.scss"

import {Map, Marker, NavigationControl, InfoWindow,MapTypeControl,ScaleControl} from 'react-bmapgl';

const HgMap = () => {
    useEffect(()=>{

        // 百度地图的用法一:
        // var HgBMapGL:{Map:any,Point:any} = BMapGL;
        // var BMAP_NORMAL_MAP:any = BMAP_NORMAL_MAP;
        
        // //实例化BMapGL
        // var map = new HgBMapGL.Map("container");
        // //设置中心点坐标 , 这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
        // var point = new HgBMapGL.Point(116.404, 39.915);
        // //同时设置地图展示级别
        // map.centerAndZoom(point, 15); 
        // //开启鼠标滚轮缩放地图
        // map.enableScrollWheelZoom(true);
        // //设置地图类型为地球模式
        // map.setMapType(BMAP_NORMAL_MAP);

        // 地图类型常量：
        // 1.标准地图：BMAP_NORMAL_MAP
        // 2.地球模式：BMAP_EARTH_MAP
        // 3.普通卫星地图：BMAP_SATELLITE_MAP

        // 百度地图的用法二( 使用react-bmapgl组件库 ):

    },[])
    return (
        <div className='map'>
            <HgBreadCrumb />
            {/* <div id="container"></div>  */}

            {/* enableScrollWheelZoom 开启鼠标滚轮缩放 */}
            {/* center 地图中心点 */}
            {/* zoom 缩放级别 */}
            <Map className="hgmap" enableScrollWheelZoom center={{lng: 116.402544, lat: 39.928216}} zoom="15">
                <MapTypeControl />
                <ScaleControl />
                {/* <Marker position={{lng: 116.402544, lat: 39.928216}} /> */}
                {/* <NavigationControl />  */}
                {/* <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/> */}
            </Map>
        </div>
    );
};

export default HgMap;